<template>
  <div style="width: 100%;min-height: 100vh;background-color: #F5F7F9" class="font-Regular">
    <Header ref="headerRef" @tabIndexChange="" :selectedIndex="3"></Header>
    <div class="flex-column bg-color-white width100">
      <div class="container">
        <div class="flex-between-center font-normal" style="font-weight: 400;color: #121212;border-bottom: 1px solid #f2f2f2;">
          <div style="line-height: 56px">我的课程</div>
          <div class="flex-all-center theme-hover" @click="openLiveDialog()">
            <el-icon size="16"><Calendar /></el-icon>
            <span style="margin-left: 5px">直播日历</span>
          </div>
        </div>
        <div class="flex-start-center" style="padding: 20px 0 12px;flex-wrap: wrap">
          <span v-for="(item, index) in data.myCourseTypeList" class="course-type-item" :class="{ active: data.selectedIndex == index}" @click="selectCourseTypeHandle(item.courseType, index)">{{item.courseTypeName}}</span>
        </div>
      </div>
    </div>
    <div class="container flex-start-center" style="padding-top: 20px;flex-wrap: wrap">
      <div v-for="(item, index) in data.myCourseList" style="margin-bottom: 20px" :style="((index+1) % 3 != 0)? {marginRight: '20px'} : ''">
        <MyCourseCard :item="item" :courseTypeId="data.selectedCourseTypeId"></MyCourseCard>
      </div>
    </div>
  </div>
  <LiveListDialog :visible="data.showLiveDialog" :liveList="data.liveList" @closeDialog="closeLiveDialog"></LiveListDialog>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import Header from "../component/header.vue";
import {Calendar} from '@element-plus/icons-vue'
import MyCourseCard from './component/my-course-card.vue'
import LiveListDialog from './component/live-list-dialog.vue'
import {listLive, listMyCourse, listMyCourseType} from '../../api/study.js'
import {ElMessage} from 'element-plus'

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const data = reactive({
  myCourseTypeList: [],
  showLiveDialog: false,
  selectedIndex: 0,
  selectedCourseTypeId: '',
  myCourseList: [],
  liveList:[]
});
function selectCourseTypeHandle(id, index) {
  data.selectedIndex = index
  data.selectedCourseTypeId = id
  getMyCourseList(id)
}
const initData = () => {
  listMyCourseType((res)=> {
    data.myCourseTypeList = res.data
    if(data.myCourseTypeList.length > 0) {
      data.selectedCourseTypeId = data.myCourseTypeList[0].courseType
      getMyCourseList(data.selectedCourseTypeId)

    }
  })
}
function getMyCourseList(id) {
  listMyCourse({categoryId: id},(res)=> {
    data.myCourseList = res.data
  })
}
function getLiveList(id) {
  listLive({courseType: id}, (res)=> {
    data.liveList = res.data
    data.showLiveDialog = true
  })
}
function openLiveDialog() {
  if(data.selectedCourseTypeId) {
    getLiveList(data.selectedCourseTypeId)
  } else {
    ElMessage.warning('请先购买课程')
  }
}
function closeLiveDialog() {
  data.showLiveDialog = false
}

onMounted(() => {
  initData()
})

</script>

<style scoped>
.course-type-item {
  margin: 0 20px 8px 0;
  padding: 0px 10px;
  height: 32px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
  line-height: 32px;
}
.course-type-item:hover {
  color: #04addb;
  background: #EEF4FD;
  border-radius: 4px;
}
.course-type-item.active {
  color: #FFFFFF;
  background: #04addb;
  border-radius: 4px;
}
</style>
